<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>07_事件处理</title>
</head>
<body>

<!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->
<div id="demo">
	
	<h2>1. 绑定监听</h2>
	<button @click="test1">test1</button>
	<button @click="test2('abc')">test2</button>
	<button @click="test3">test3</button>
	<button @click="test4('abc',$event)">test4</button>
	<h2>2. 事件修饰符</h2>
	<div style="width: 200px;height: 200px;background: red" @click="test5"><div @click.stop="test6" style="width: 100px;height: 100px;background: blue;"></div></div>
	<a href="www.baidu.com" @click.prevent="test7">click</a>>
	<h2>3. 按键修饰符</h2>
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">
</div>

<script src="../js/vue.js"></script>
<script>
	const vm = new Vue({
		el: '#demo',
		data: {

		},
		computed: {

		},
		methods: {
			test1(){
				alert('test1');
			},
			test2(str){
				alert(str);
			},
			test3(event){
                alert(event.target.innerHTML);
			},
			test4(str,event){
				alert(str+'---'+event.target.innerHTML)
			},
			test5(){
				alert("out");
			},
			test6(e){
				//e.stopPropagation(); 原生停止事件冒泡的方法
				alert("inner");
			},
			test7(e){
                //e.preventDefault();//原生阻止事件默认行为的方法
                alert("阻止了默认行为");
			},
			test8(e){
				//原先使用的方法
				// if (e.keyCode==13) {
    //                 alert("click code:" + e.keyCode);
    //             }

                alert(e.target.value);
			}

		}
	})
</script>
</body>
</html>